<template>
  <div class="people">
    <div class="flexAround" style="margin-bottom:30px">
      <div class="part1_div">
        <div>在场人数</div>
        <div>{{this.topInfo.inNumber}}</div>
      </div>
      <div class="part1_div">
        <div>离场人数</div>
        <div>{{this.topInfo.allNumber-this.topInfo.inNumber}}</div>
      </div>
      <div class="part1_div" style="  border-right: none;">
        <div>总计人数</div>
        <div>{{this.topInfo.allNumber}}</div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div>
      <div class="center flexBetweenCenter" style="margin-bottom:20px">
        <div class="center_title">人员列表</div>
        <div>
          <a-radio-group v-model="radioModel" @change="onChange">
            <a-radio-button value="0">全部</a-radio-button>
            <a-radio-button value="1">在场</a-radio-button>
            <a-radio-button value="2">离场</a-radio-button>
          </a-radio-group>
          <a-input-search
            placeholder="请输入姓名查询"
            style="width: 200px;margin-left:20px"
            v-model="fullName"
            @search="onSearch"
          />
        </div>
      </div>
      <!-- 表格 -->
      <div class="atable" style="margin-bottom:30px">
        <a-table :columns="columns" :data-source="data" :pagination="false">
          <div
            style="color:#1492ff;cursor:pointer"
            slot="name"
            slot-scope="text,record"
            @click="people_info(record)"
          >{{ text }}</div>
        </a-table>
      </div>

      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="this.configFun.pageNum(total)"
            show-size-changer
            :pinspector-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
            </template>
          </a-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryTeamDetail } from '@/api/teamGroup'
import moment from 'moment'
import { mapGetters } from 'vuex'
const columns = [
  // { title: '人员编码', dataIndex: 'code', key: 'code' , align: 'center'},
  { title: '姓名', dataIndex: 'fullName', key: 'name', align: 'center', scopedSlots: { customRender: 'name' } },
  { title: '岗位', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '施工班组', dataIndex: 'departmentName', key: 'departmentName', align: 'center' },
  { title: '进场时间', dataIndex: 'inTime', key: 'inTime', align: 'center' },
  { title: '离场时间', dataIndex: 'outTime', key: 'outTime', align: 'center' }
]
export default {
  data() {
    return {
      radioModel: '0',
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      columns,
      data: [],
      fullName: '',
      topInfo: ''
    }
  },
  mounted() {
    // console.log(this.$route.query);

    this.teamDetail()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    moment,
    onChange(e) {
      this.current = 1
      // console.log(this.radioModel)
      this.teamDetail()
    },
    onSearch(value) {
      // console.log(value)
      this.getTotal()
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTotal(pageSize, this.current)
    },
    //搜索时获取满足的有多少页
    getTotal(val, current) {
      let size = ''
      let page = ''
      if (val) {
        size = val
      } else {
        size = this.pageSize
      }
      if (current) {
        page = current
      } else {
        page = this.current
      }
      let data = {
        likeFullName: this.fullName,
        inOutStatus: this.radioModel,
        orgId: sessionStorage.getItem('gatewayId'),

        projectId: sessionStorage.getItem('projectId'),
        page: this.current,
        size: this.pageSize,
        teamId: sessionStorage.getItem('teamId')
      }
      queryTeamDetail(data).then((res) => {
        let data = res.data.data
        this.total = data.total
        //   console.log(Math.ceil(this.total/size));
        // console.log(page);
        if (Math.ceil(this.total / size) < page) {
          this.current = 1
        } else {
          this.current = page
        }

        this.pageSize = size
        this.teamDetail()
      })
    },
    //表格数据
    teamDetail() {
      let data = {
        likeFullName: this.fullName,
        inOutStatus: this.radioModel,
        orgId: sessionStorage.getItem('gatewayId'),

        projectId: sessionStorage.getItem('projectId'),
        page: this.current,
        size: this.pageSize,
        teamId: sessionStorage.getItem('teamId')
      }
      this.data = []
      queryTeamDetail(data).then((res) => {
        let data = res.data.data
        this.topInfo = data
        this.fn()
        data.personVOList.forEach((item) => {
          item.key = item.id
          item.inTime = moment(item.inTime).format('YYYY-MM-DD')
          if (item.outTime != null) {
            item.outTime = moment(item.outTime).format('YYYY-MM-DD')
          }
        })
        this.data = data.personVOList
        if (data.total == 0) {
          this.total = 1
        } else {
          this.total = data.total
        }
      })
    },
    people_info(text) {
      sessionStorage.setItem('orgPersonId', text.id)

      let flag = sessionStorage.getItem('backstage')
      if (flag == 'true') {
        const { href } = this.$router.resolve({
          path: `/personnelInformationLabor/${text.id}`,
          query: { id: text.id }
        })

        window.open(href, '_blank')
      } else {
        this.$router.push({ path: '/personnelInformation' })
      }
    },
    fn() {
      this.$emit('queryInfo', this.topInfo)
    }
  }
}
</script>

<style scoped>
/* ::v-deep .ant-table-pagination.ant-pagination{
   display: none; } */
.part1_div {
  width: 375px;
  height: 50px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.part1_div :nth-child(1) {
  color: #ccc;
  font-size: 14px;
}
.part1_div :nth-child(2) {
  color: #333;
  font-size: 23px;
}
.title {
  color: #1890ff;
  font-size: 16px;
  margin-bottom: 10px;
}
.td_name {
  color: #1890ff;
  cursor: pointer;
}
</style>
